<template>
  <div class="container examination">
    <!-- 面包屑导航 -->
    <breadcrumb :breadcrumbConfig=breadcrumbConfig></breadcrumb>
    <!--    <breadcrumb></breadcrumb>-->
    <!-- 面包屑导航 -->
    <div class="content">
      <h2>订单审核</h2>
      <h3>数据筛选</h3>
      <form-filed class="search-form" :formconfig="searchFormConfig.formconfig" :formData="searchFormConfig.formData"
                  @formDataval="dialogClick" ref="formAttr"/>
    </div>
    <div class="content">
      <h3>列表数据<el-button @click="showDialog('批量审核', '640px', 'shenheList', multipleSelection, true)">批量审核</el-button></h3>
       <orders-list-table v-loading="loading" :dataList="page.list" :heightStr='columns.height' :config="columns.config" :typeStr='columns.type'
                         @onTableShowDialogCom="resTableShowDialog"
        @tableSelectionChange="handleSelectionChange" ></orders-list-table>
      <!-- 分页start -->
      <div class="page">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-sizes="[3, 5, 10, 20, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalNum"
        >
        </el-pagination>
      </div>
      <!-- <lb-table
      v-horizontal-scroll='"always"'
          :column="columns"
          :data="page.list"
          pagination
          :total="page.totalNum"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 30, 50,200]"
          :current-page.sync="page.currentPage"
          :page-size="page.pageSize"
          @size-change="handleSizeChange"
          @p-current-change="handleCurrentChange"
          @selection-change="handleSelectionChange"
      >
      </lb-table> -->
    </div>
    <!--========================== el-dialog =================================-->
      <el-dialog
         :title="dialog.title"
         :visible.sync="dialog.visible"
         :width="dialog.width"
         :append-to-body="true"
      >
        <!-- 审核 -->
        <template v-if="dialog.type == 'shenheList'">
          <audit-operation ref="shenheList" :orderObj="dialog.row" :dialogType='dialog.type' :afterNos="multipleSelection" :isBatch="dialog.batch" :isCleanUp='true' @submitState="shenheState"></audit-operation>
          <div class="dialogBtnright" style="margin-top:20px">
            <el-button class="setPay_payment_btn_quxiao" type="primary" plain @click="closeDialog">取 消</el-button>
            <el-button class="setPay_payment_btn_queren" type="primary" @click="actionDialog">确 定</el-button>
          </div>
        </template>
        <!-- 进度 -->
        <template v-if="dialog.type === 'shenheStep'">
          <step-progress :orderObj="dialog.row" :processFunc="dictionaries.process_func" type="shenheStep"></step-progress>
        </template>
      </el-dialog>
    <!--=========================== el-dialog end================================-->
  </div>

</template>

<script>
import formFiled from '@/components/form/index'
import breadcrumb from '@/components/breadcrumb'
import LbTable from '@/components/lb-table/lb-table'
import StepProgress from '@/components/StepProgress'

import AuditOperation from '@/components/AuditOperation'

import mixinsCommon from '../orderBox/mixins/common.js'
import mixinsOrderList from '../orderBox/mixins/mixinsOrderList.js'

import OrdersListTable from '../orderBox/components/OrdersListTable.vue'

export default {
  mixins: [mixinsCommon, mixinsOrderList],
  components: {
    formFiled,
    breadcrumb,
    LbTable,
    AuditOperation,
    StepProgress,
    OrdersListTable
  },
  data () {
    return {
      loading: false,
      dialog: { visible: false, title: '审核', type: '', width: '50%' },
      page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
      examine: { // 是否通过审核
        state: '1',
        ids: [],
        doc: ''
      },
      breadcrumbConfig: {
        list: [
          {
            title: '审核管理',
            type: '#ff0000',
            path: ''
          },
          {
            title: '订单审核',
            type: '1',
            path: ''
          }
        ]
      },
      searchFormVal: {},
      searchFormConfig: {
        formconfig: {
          labeWidth: 82, // 表单宽度
          itemList: [// 表单的list
            { type: 'input', prop: 'orderNo', placeholder: '请输入订单编号', label: '订单编号', size: 'small' },
            { type: 'input', prop: 'platformOrderNo', placeholder: '请输入关联订单号', label: '关联订单号', size: 'small' },
            { type: 'input', prop: 'postUserInfo', placeholder: '请输入收货人信息', label: '收货人信息', size: 'small' },
            { type: 'input', prop: 'goodsName', placeholder: '请输入商品名称', label: '商品名称', size: 'small' },
            // {
            //   type: 'select', prop: 'payType', placeholder: '请选择支付方式', label: '支付方式', size: 'small',
            //   option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            // },
            {
              type: 'select', prop: 'approveStatus', placeholder: '请选择审核状态', label: '审核状态', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            {
              type: 'cascader', prop: 'orgCode', placeholder: '请选择公司部门', label: '公司部门', size: 'small', showAllLevels: false,
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2跟进客服' }]
            },
            {
              type: 'select', prop: 'applierId', placeholder: '请选择跟进客服', label: '跟进客服', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            }, {
              type: 'select', prop: 'approverId', placeholder: '请选择审核人', label: '审核人', size: 'small',
              option: [{ label: '选择一', value: 'key1' }, { label: '选择二', value: 'key2' }]
            },
            { type: 'daterange', prop: 'createdTime', placeholder: '请选择日期', label: '提交时间', size: 'small' },
            { type: 'daterange', prop: 'finishedTime', placeholder: '请选择日期', label: '审核时间', size: 'small' }
          ],
          btnarry: [// 表单按钮
            { name: '查询', click: 'add', type: 'primary', plain: true, size: 'small' },
            { name: '重置', click: 'clrear', type: 'primary', plain: true, size: 'small' }
          ]
        },
        formData: { // 表单提交数据，
          orgCode: [],
          checkbox: []// 注：如果类型是checkbox，必须foemData里边提前声明数组
        }
      },
      activeName: 'goods',
      columns: {
        type: 'auditOrder',
        height: '5000px',
        sortObj: {},
        config: [
          { type: 'selection', width: 50 },
          { prop: 'payTypeLabel', label: '商品名称', width: 150, slot: 'goods' },
          { prop: 'quantity', label: '数量', width: 40 },
          { prop: 'postName', label: '收货人信息', slot: 'contact' },
          { prop: 'orgName', label: '公司部门' },
          { prop: 'totalAmount', label: '金额', width: 70, slot: 'amount' },
          { prop: 'remarks', label: '备注/留言', width: 120, slot: 'remarks' },
          { prop: 'approveStatusLabel', label: '审核状态', width: 55, slot: 'examine' },
          { prop: 'approverName', label: '审核信息', width: 50 },
          { prop: 'approveReason', label: '不通过原因' }
        ]
      },
      multipleSelection: [] // 多选
    }
  },
  watch: {
    dictionaries: {
      handler (newVal, oldVal) {
        // 支付方式
        // this.setSearchDictionaries('支付方式', 'order_pay_type')
        // 审核状态
        this.setSearchDictionaries('审核状态', 'process_task_status')
      },
      deep: true // 为true，表示深度监听
    },
    orgCodeList (val, oldVal) {
      val.forEach(item => {
        item.label = item.reallyName
        item.value = item.id
      })
      const index = this.searchFormConfig.formconfig.itemList.findIndex(e => { return e.label === '公司部门' })
      this.searchFormConfig.formconfig.itemList[index].option = val
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      // id 为 1 的超级管理员不做默认 公司部门
      if (userInfo && userInfo.id !== 1) {
        // console.log(val, val.length)
        if (val[0].children) {
          // const orgCode = JSON.parse(sessionStorage.getItem('orgCode'))
          this.searchFormConfig.formData.orgCode = [...userInfo.orgCodes]
        } else {
          this.searchFormConfig.formData.orgCode.push(userInfo.orgCode)
        }
      }
    },
    salesAuthority  (val, oldVal) { // 跟进客服
      val.forEach(item => {
        item.label = item.reallyName
        item.value = item.id
      })
      const index = this.searchFormConfig.formconfig.itemList.findIndex(e => { return e.label === '跟进客服' })
      this.searchFormConfig.formconfig.itemList[index].option = val
    }
  },
  created () {
    this.initSearchList() // 初始化，搜索需要的列表数据
    this.fetchData()
    this.getApproverList() // 审核人 列表
  },
  methods: {
    // 复制
    copyInfo (row) {
      console.log(row, 'row')
      const that = this
      // let inline = this.line.find((res) => res.id == row.userDitch);
      const info =
 (row.orderNo == null ? '无' : row.orderNo)
      that.$copyText(info).then(
        function (e) {
          that.$message({
            type: 'success',
            message: '复制成功'
          })
        },
        function (e) {
          that.$message({
            type: 'warning',
            message: '复制失败'
          })
        }
      )
    },
    // 设置 搜索 筛选 字典 值
    setSearchDictionaries (str, keyVal) {
      const dictionaries = this.dictionaries
      const payIndex = this.searchFormConfig.formconfig.itemList.findIndex(e => { return e.label === str })
      for (const key in dictionaries) {
        if (key === keyVal) {
          dictionaries[key].forEach(item => {
            item.label = item.dictName
            item.value = item.dictId
          })
          this.searchFormConfig.formconfig.itemList[payIndex].option = dictionaries[key]
          break
        }
      }
    },
    shenheState (state) {
      // 提交后，关闭并还原值
      this.closeDialog()
      if (state) { this.fetchData('search', true) }
    },
    // 接受表单组件的数据
    dialogClick (val, state) {
      this.searchFormVal = val
      // this.formFiledData = Object.assign(this.formFiledData, val)
      this.fetchData('search', true, true)
    },
    fetchData (type, isRefresh, isInit) {
		this.loading = true;
      if (type === 'reset') {
        this.$refs['searchForm'].resetFields()
        this.page.pageNo = 1
        this.page.pageSize = 10
        this.page.currentPage = 1
      }
      let params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        status: this.page.status
      }
      if (isRefresh && this.page.list.length === 1 && this.page.currentPage > 1) {
        // debugger
        this.page.currentPage = this.page.currentPage - 1
        params.pageNo = this.page.pageNo - 1
      }
      if (isInit) {
        params.pageNo = 1
        this.page.currentPage = 1
      }
      if (type === 'search') {
        const searchFormVal = this.searchFormVal
        // console.log(searchFormVal)
        params = Object.assign(params, searchFormVal)
        // console.log(params, 'params')
        if (searchFormVal.createdTime) {
          params.createdTimeStart = searchFormVal.createdTime[0]
          params.createdTimeEnd = searchFormVal.createdTime[1]
        }
        if (searchFormVal.finishedTime) {
          params.finishedTimeStart = searchFormVal.finishedTime[0]
          params.finishedTimeEnd = searchFormVal.finishedTime[1]
        }
        if (searchFormVal.orgCode) {
          params.orgCode = searchFormVal.orgCode[searchFormVal.orgCode.length - 1]
        }
        // 去除字符串 前后 空格
        for (const item in params) { if (typeof params[item] === 'string') { params[item] = params[item].trim() } }
      }
      // console.log(params)
      this.$api.orderPageList(params).then((res) => {
        if (res.code === 0) {
          this.page.list = res.data.list
          this.page.totalNum = res.data.totalNum
        } else {
          console.log('goodsPageList - 失败', type)
        }
		this.loading = false;
      }).catch((err) => {
        console.log(err)
		this.loading = false;
      })
    },
    handleCurrentChange (currentChange) {
      this.page.pageNo = currentChange
      this.fetchData('search')
    },
    handleSizeChange (sizeChange) {
      this.page.currentPage = 1
      this.page.pageSize = sizeChange
      this.fetchData('search')
    },
    // 多选
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 初始化，搜索需要的列表数据
    initSearchList () {
      const params = { pageNo: 1, pageSize: 1001 }
      this.getOrgTreeList() // 公司部门
      this.getSalesAuthority(params) // 跟进客服
    },
    // 审核人
    getApproverList () {
      const params = { pageNo: 1, pageSize: 10000 }
      this.$api.approverList(params).then((res) => {
        res.data.forEach(item => {
          item.label = item.name
          item.value = item.id
        })
        const index = this.searchFormConfig.formconfig.itemList.findIndex(e => { return e.label === '审核人' })
        this.searchFormConfig.formconfig.itemList[index].option = res.data
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.hide-content{display: none!important;}
/deep/.show-content{display: inline-block;}
/deep/.el-link{margin: 0 5px;}
/deep/ .el-button {border: none;}

/deep/.el-table th > .cell{
  text-align: unset;
}
/deep/.el-table td{
  text-align: unset;
}
.el-table__body-wrapper .el-table__body .el-table__row .cell{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}
.examination{
  .content{
    h3{
      .el-button{
        color: #4168E7;
        background: #FFFFFF;
        border: 1px solid #4168E7;
      }
    }
  }
}
.examination{
  .content{
    h3{
      .el-button{
        float: right;
        width: 121px;
        height: 36px;
        border-radius: 4px;
        padding: 0;
        margin-top: -4px;
      }
    }
    .lb-table{
      .el-table{
        .el-table__fixed-body-wrapper{
          .el-table__body{
            .el-table__row{
              .cell{
                // 操作按钮
                .el-link{
                  margin: 0 5px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.dialogBtnright{
  text-align: right;
}
/deep/.el-table__row td .cell span, /deep/.el-table__row td .cell div p{
  display: block;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}
/deep/.el-select{
  border-left: none;
  border-right: none;
  input{
    border-left: 1px solid #d8dce5!important;
    border-right: 1px solid #d8dce5!important;
    border-radius: 5px!important;
  }
}
/deep/.el-dialog__body{
  padding: 30px;
}
/deep/.el-scrollbar{
  height:10px;
}
/deep/.el-scrollbar__bar.is-horizontal{
  height: 9px;

}
/deep/ .el-form-item__label{
  padding: 0 10px 0 0;
}
.page{
  text-align: center;
  margin: 10px auto;
}
</style>
